<template>
	<view class="con">
		<view class="bj">
			<u-navbar title="就近加油" :autoBack="true" bgColor="#3284fc"
				titleStyle="font-size:18px; color:white;height:44px;line-height:44px" leftIconColor="#fff">
			</u-navbar>
			<view class="search">
				<u-search shape="round" placeholder="输入需要搜索的内容" :clearabled="true" :showAction="false" bgColor="#f7f7f7"
					height="80rpx" searchIconColor="#3284fc"
					:customStyle="{width:'200px',marginLeft:'20px'}"></u-search>
				<navigator class="dt" open-type="navigate" url="/pages/refuel/refuel_nearby/refuel_nearby">
					列表模式
				</navigator>
			</view>
			<view class="page-body">
				<view class="page-section page-section-gap">
					<map style="width: 90%; height: 500px; padding:15px 15px;" :latitude="latitude"
						:longitude="longitude" @markertap="onMarkerTap" @callouttap="shopDeta" :markers="markes">
					</map>
				</view>
			</view>
		</view>
		<view class="db" v-if="qw && selectedMarker.id != 0">
			<view class="db1">
				<view class="wz">
					<view style="font-weight: 600;">{{selectedMarker.title}}</view>
					<view style="font-size: 12px; margin: 2px 0;">{{selectedMarker.address}}</view>
					<navigator open-type="navigate" url="/pages/refuel/refuel_nearby_jy/refuel_nearby_jy">
						<u-icon label="门店详情" size="10" name="/static/images/@2x.png" labelSize="12px"
							labelColor="#3789ff"></u-icon>
					</navigator>
				</view>
				<image :src="selectedMarker.photo"></image>
			</view>
			<u-button type="primary" text="立即导航"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				latitude: 34.825845,
				longitude: 113.558364,
				// markes: [],
				selectedMarker: '',
				qw: false,
				markes: [{
					id: 0, // 使用 marker点击事件 需要填写id
					title: '111',
					latitude: 34.825845,
					longitude: 113.558364,
					iconPath: '../../../static/images/4@2x.png',
					info: '222',
					callout: { // 自定义一直显示的数据，自己的定位信息
						content: "附近门店>",
						color: "#fff",
						bgColor: '#000',
						borderRadius: 10,
						padding: 10,
						display: "ALWAYS",
					}

				}]
				// {
				// 	id: 1, // 使用 marker点击事件 需要填写id
				// 	title: '111',
				// 	latitude: 34.825245,
				// 	longitude: 113.558364,
				// 	iconPath: '../../../static/images/4@2x.png',
				// 	info: '222'
				// },
				// {
				// 	id: 2, // 使用 marker点击事件 需要填写id
				// 	title: '111',
				// 	latitude: 34.825545,
				// 	longitude: 113.558364,
				// 	iconPath: '../../../static/images/4@2x.png',
				// 	info: '222'
				// }]
			}
		},
		onLoad() {
			// this.getMypostion();
			this.getOilList();
		},
		methods: {
			shopDeta(){
				uni.navigateTo({
					url:'/pages/refuel/refuel_nearby/refuel_nearby'
				})
			},
			onMarkerTap(e) {
				// 点击标注点时显示商家数据
				this.selectedMarker = this.markes.find(obj => obj.id ===
					e.detail.markerId);
				if (this.selectedMarker) {
					this.qw = true;
					console.log(this.selectedMarker)
					// 这里可以添加逻辑来定位信息窗口的位置
				}
			},
			getMypostion() {
				let that = this;
				uni.getLocation({
					success(res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
					}
				})
			},
			getOilList() {
				let that = this
				this.$http({
					url: '/api/shop/petrol/list',
					method: 'GET',
					data: that.queryParams,
					success(res) {
						that.refuelList = res.data.rows

						for (let item of that.refuelList) {
							that.markes.push({
								id: item.id,
								title: item.name,
								longitude: item.longitude,
								latitude: item.latitude,
								iconPath: '/static/images/4@2x.png',
								photo: item.petrolImage.photo,
								address: item.address

							})
						}
						console.log(that.markes)
					}
				})
			},
		}
	}
</script>

<style scoped>
	.u-button {
		width: 330px;
		border-radius: 20px;
		margin-top: 10px;
		background-color: #0662e6;
	}

	.wz {
		margin-left: 30px;
	}

	.con {
		position: relative;
	}

	.db1 {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.db {
		width: 100%;
		height: 150px;
		/* border: 2px solid red; */
		position: fixed;
		background-color: #ffffff;
		bottom: 0;

	}

	.db image {
		width: 100px;
		height: 66px;
		border-radius: 10px;
		margin-right: 30px;
	}

	.page-body {
		border-radius: 10px;
		margin: 20px auto;
		width: 95%;
		/* 		border: 2px solid red; */
		background-color: #ffffff;

	}

	.bj {
		width: 100%;
		height: 220px;
		background-color: #3384fc;
	}

	.search {
		margin-top: 50px;
		display: flex;
		justify-content: space-around;

	}

	.dt {
		width: 40px;
		height: 40px;
		font-size: 14px;
		background-color: #ff6c00;
		border-radius: 50%;
		text-align: center;
		margin: 0 15px 0 15px;
		color: #f7f7f7;
		padding: 7px 7px;

	}
</style>